import Taro from "@tarojs/taro";
import {useCallback} from 'react'
import {View} from '@tarojs/components'
import {AtNavBar, AtIcon} from 'taro-ui'

import {
  getStatusBarHeight,
  rpxToPx
} from "../../utils/util";
import config from '../../constants/config';

const navBarHeight = config.navBarHeight,navTitleFontSize = 32,backBtnLeft = 25, designWidth = config.designWidth;

const NavBar = ({ paddingTop, titleStyle, showBackIcon, title, sticky, customStyle, height, backIconColor, className, children}) => {
  const statusBarHeight = getStatusBarHeight()
  const navHeight = rpxToPx(navBarHeight)
  const goBack = useCallback(async () => {
    await Taro.navigateBack()
  },[])
  const navPaddingTop = paddingTop || {
    top: `${statusBarHeight}px`
  };
  const navTitleStyle = Object.assign({
    fontSize: `${Taro.pxTransform(navTitleFontSize,designWidth)}`
  }, titleStyle || {})
  const navShowBackIcon = showBackIcon === undefined ? true : showBackIcon
  const navTitle = title === undefined ? '' : title
  const totalHeight = statusBarHeight + navHeight
  const NavPaddingStyle = {
    height: `${totalHeight}PX`,
    backgroundColor: 'white'
  }
  if (sticky && customStyle && height !== undefined){
    const CustomNavStyle = {
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      color: 'white',
      zIndex: 100,
      lineHeight: `${Taro.pxTransform(height,designWidth)}`,
      textAlign: 'center',
      height: `${Taro.pxTransform(height,designWidth)}`,
      paddingTop: `${statusBarHeight}PX`
    }
    const realNavStyle = Object.assign(CustomNavStyle, customStyle)
    const fakeDomStyle = {
      position: 'relative',
      height: `${Taro.pxTransform(height,designWidth)}`,
      paddingTop: `${statusBarHeight}PX`
    }
    const backBtnStyle = {
      position:'absolute',
      left: `${Taro.pxTransform(backBtnLeft,designWidth)}`
    }
    if (navTitle !== ''){
      return <View>
        <View style={realNavStyle} className={className}>
          <View style={navTitleStyle}>
            {navShowBackIcon && <View style={backBtnStyle} onclick={goBack}><AtIcon value='chevron-left' size='22' color={backIconColor !== undefined ? backIconColor :'#FFFFFF'} /></View>}
            {navTitle}
          </View>
          {children}
        </View>
        <View style={fakeDomStyle} />
      </View>
    }else{
      return <View style={realNavStyle} className={className}>
        {children}
      </View>
    }
  }

  delete navPaddingTop.top
  navPaddingTop.paddingTop = `${statusBarHeight}px`
  if (navShowBackIcon){
    return <View style={NavPaddingStyle}>
      <AtNavBar
        id='navId'
        onClickLeftIcon={goBack}
        fixed
        leftIconType='chevron-left'
        color='#000'
        customStyle={navPaddingTop}
      >
        <View style={navTitleStyle}>{navTitle}</View>
        {children}
      </AtNavBar>
    </View>
  }else {
    return <View style={NavPaddingStyle}>
      <AtNavBar
        id='navId'
        fixed
        color='#000'
        customStyle={navPaddingTop}
      >
        <View style={navTitleStyle}>{navTitle}</View>
        {children}
      </AtNavBar>
    </View>
  }
}
export {
  NavBar,
  navBarHeight,
  navTitleFontSize
}
